<template>
	<div class="avatar" v-if="show">
		<div class="bg" @click='show = false'></div>
		<div class="content">
			<div class="item">
				<span>拍照</span>
				<input type="file" accept="image/*" capture="camera" class="avatarStyle" @change='update($event)'>
			</div>
			<div class="item">
				<span>从相册选择</span>
				<input type="file" accept="image/*" multiple class="avatarStyle" @change='update($event)'>
			</div>
			<div class="cell item" @click='show = false'>取消</div>
		</div>
		<loading :show="loadingShow" text="正在上传"></loading>
	</div>
</template>

<script>
import { updateAvatar } from '../../../config/getData'
import Loading from 'vux/src/components/loading/'

export default {
	data() {
		return {
			show: false,
			loadingShow: false
		};
	},
	props: ["value"],
	watch: {
		show(val) {
			this.$emit('input',val)
		},
		value: {
			handler: function(val) {
			this.show = val;
			},
			immediate: true
		}
	},
	methods:{
		update (e) {
			this.loadingShow = true;
			let file = e.target.files[0]

			let param = new FormData()  // 创建form对象
			param.append('file', file)  // 通过append向form对象添加数据

			let config = {
                headers: {'Content-Type': 'multipart/form-data'}
			}
			updateAvatar(param,'upImg',config).then( res => {
				this.$emit('showOk',res.msg, res.rows.url);
				this.loadingShow = false;
			})

		}
	},
	components:{
		Loading
	},
	mounted() {
		this.show = this.value;
	}
};
</script>


<style lang="scss" scoped>
@import '../../../assets/css/all';

.avatar {@include screen;background-color:transparent;
	.bg{@include screen;background-color:rgba(0,0,0,.5);}
	.item{background-color: white;line-height: 60px;text-align: center;font-size:16px;position: relative;}
	.item + .item{border-top:1px solid #f0f0f0;}
	.cell{margin-top:10px;}
	.content{background-color: #f5f5f5;position: absolute;width:100%;left:0;bottom:0;
	}

}

</style>
